<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index/home' }">饼状图</el-breadcrumb-item>
    </el-breadcrumb>


    <section class="chart-container">
      <el-row>
        <el-col :span="12">
          <div id="chartPie" style="width:100%; height:400px;"></div>
          <!-- <Calendar class="cal" /> -->
        </el-col>
        <el-col :span="12">
          <!-- <div id="chartPie" style="width:100%; height:400px;"></div> -->
          <Calendar class="cal" />
        </el-col>
      </el-row>
    </section>

    
  </div>
</template>



<script>
import echarts from "echarts";
import Calendar from "vue-calendar-component";
export default {
  components:{
    Calendar
  },
  data() {
    return {
      chartPie: null,
    };
  },
  methods: {
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById("chartPie"));
      this.chartPie.setOption({
        title: {
          text: "Pie Chart",
          subtext: "纯属虚构",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["Cayenne", "Taycan", "718", "911", "Panamera"],
        },
        series: [
          {
            name: "访问数据",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "Cayenne" },
              { value: 310, name: "Taycan" },
              { value: 234, name: "718" },
              { value: 135, name: "911" },
              { value: 1548, name: "Panamera" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },

  mounted: function () {
    this.drawCharts();
  },
  // updated: function () {
  //     this.drawCharts()
  // }
};
</script>


<style scoped>
.chart-container {
  width: 100%;
  float: left;
}
.el-col {
  padding: 30px 20px;
}
</style>